<template>
  <view v-if="!isLoading">
    <view class="course_banner" :style="'background-image: url('+$xyfun.image(course.image)+');'">
      <view class="c_shade">
        <view class="c_name">{{course.name}}</view>
        <view class="c_tags m-t-20 ts-24"><text  v-for="(item,index) in tagList">{{item}}</text></view>
      </view>
    </view>
    <view class="buy-model-box">
      <view class="item">
        <view class="l">单价</view>
        <view class="r ts-40">￥{{course.price}}</view>
      </view>
      <view class="item sales flex p-30 m-b-2 lh-60">
        <view class="l">数量</view>
        <view class="r tb m-l-auto tc flex">
          <view class="ts-40 br-10 yz-iconfont yz-jjian-" @tap="reduce"></view>
          <input @input="buyNumInput" type="number" class="br-10 m-lr-10" :value="buyNum" />
          <view class="ts-40 br-10 yz-iconfont yz-tianjia" @tap="add"></view>
        </view>
      </view>
      <view class="item">
        <view class="l ts-22">权益卡剩余免费下单课程数量</view>
        <view class="r ts-30">{{benfit_discount}}节</view>
      </view>
    </view>

    <view class="buy-model-box">
      <view class="item">
        <input value="" class="ts-24 wa" placeholder="将您的要求告诉我,我将提前为您准备" @input="remarkChange"></input>
      </view>
    </view>

    <view class="p-30" v-if="course.note">
      <rich-text :nodes="$xyfun.richTextHandle(course.note)"></rich-text>
    </view>


    <view class="confirm_order">
      <view class="l flex p-t-25 lh-50 cf_money">
        <view class="ts-42 tb"><text class="tc-b m-r-20 ts-26">实付</text><text class="m-r-10 ts-26">¥</text>{{total_money}}</view>
      </view>
      <view class="r m-l-auto cf_confirm tc tc-w" @tap="goPay()">确认支付</view>
    </view>

    <payPop ref='payPop' @createOrder="createOrder"></payPop>
  </view>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import xyCourseRow from '@/components/xy-course/row';
import Pay from '@/utils/pay';
import share from '@/utils/share';
import payPop from "@/components/paypop/index.vue";
export default {
  components: {
    payPop,
    xyCourseRow,
  },
  data() {
    return {
      isLoading: true,

      //订单参数
      id: 0,
      //课程参数
      diff_arr: [],
      course:{},
      remark: '',
      buyNum:1,
      showShare:false,
      //支付方式
      pay_type: 'balance',
      total_money : 0,
      benfit_discount : 0,
      tagList: []
    }
  },
  computed: {
    ...mapState(['common','user'])
  },
  onUnload() {
    share.setShareInfo();
  },
  async onLoad() {
    var that = this;
    var options = this.$Route.query;

    if(options?.id){
      this.id = options.id;
    }


    this.getUserInfo();

    this.loadData();
  },
  onShow(){
    this.count_money();
  },
  methods: {
    ...mapActions('user',{'getUserInfo':'getInfo'}),

    async loadData() {
      var that = this;
      this.$api.get({
        url: '/course/detail',
        loadingTip: '加载中...',
        data: {
          id: this.id,
        },
        success: res => {
          this.isLoading = false;
          that.course = res;
          that.course_handle(that);
        }
      })
    },

    //处理课程的数据
    course_handle(_that){
      let course = _that.course;
      _that.id = course.id;
      //难度number类型转array类型
      let diff_arr = [];
      for (let i = 0; i < course.difficulty; i++) {
        diff_arr.push(i);
      }
      _that.diff_arr = diff_arr;

      _that.course_minutes = course.duration;

      _that.tagList = course.tags.split(",");

    },

    goPay() {
      if(this.user.isLogin){
        this.$refs.payPop.showDiaLog(this.total_money)
      }else{
        this.$xyfun.toLogin();
      }
    },

    //创建订单
    createOrder(){
        var that = this;
        // 提交订单
        this.$api.post({
          url: '/course_order/add',
          data: {
            course_id:this.course.id,
            buy_num:this.buyNum,
            remark:this.remark,
            pay_type: this.pay_type,
          },
          loadingTip: '提交订单中...',
          success: res => {
            //发起支付
            var pay = new Pay(this.pay_type, res, 'course');
            pay.payMehod().then((res)=>{
              that.$refs.payPop.disabled = false;
              pay.payResult(res);
            },(res)=>{
              that.$refs.payPop.disabled = false;
              if(this.pay_type !== 'balance'){
                pay.payResult(res);
              }
            });

          },fail: res=>{
            that.$refs.payPop.disabled = false;
          }
        });

    },


    //计算订单金额
    count_money(){
      this.$api.post({
        url: '/course_order/countPrice',
        data: {
          buy_num:this.buyNum,
          course_id : this.id,
        },
        success: res => {
          this.total_money = res.total_money;
          this.benfit_discount = res.max_discount;
        }
      })
    },
    //减
    reduce(){
      if(this.buyNum>1){
        this.buyNum --;
        this.count_money();
      }
    },
    //输入
    buyNumInput(e){
      this.buyNum = e.detail.value;
      this.count_money();
    },
    //加
    add(){
      this.buyNum ++
      this.count_money();
    },
    //备注修改
    remarkChange(e){
      this.remark = e.detail.value;
    },


  }
}
</script>

<style>
  page{
    background: #ececec;
    overflow-x: auto;
    padding-bottom: 200rpx;
  }
</style>
<style scoped lang="scss">
  .course_banner{
    margin: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    .c_shade{
      background: linear-gradient(to left, #ffffff7a, #303030db);
      width: 100%;
      height: 200rpx;
      color: #fff;
      padding: 40rpx;
      border-radius: 10rpx;
      .c_name{
        margin-bottom: 30rpx;
        font-size: 40rpx;
        font-weight: bold;
      }
      .c_tags{
        display: flex;
        justify-content: left;
        margin-bottom: 40rpx;
        text{
          border-radius: 4rpx;
          font-size: 20rpx;
          margin-right: 6rpx;
          padding: 4rpx 8rpx;
          background-color: #676767;
          color: #fff;
        }
      }
      .c_coach{
        font-size: 24rpx;
        image{
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        text{
          font-size: 24rpx;
        }
      }
    }
  }
  .buy-model-box{
    background-color: #fff;
    margin: 20rpx 20rpx;
    border-radius: 10rpx;
    padding: 0 20rpx;
    box-sizing: content-box;
    .item{
      padding: 24rpx 32rpx;
      border-bottom: 1rpx solid #ececec;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      line-height: 40rpx;
      &:last-of-type{
        border: none;
      }
    }
    .l{
      color: #4C4C4C;
      height: 40rpx;
    }
    .r{
      color: #303030;
      height: 40rpx;
      .balanceSwitch{
        transform:scale(0.6);
        height: 40rpx;
        margin-right: -24rpx;
        margin-top: -8rpx;
      }
      .warn{
        color: #cf0404;
        font-size: 22rpx;
      }
    }
   }

  .sales{
    .r view{
      padding-bottom: 4rpx;
      height: 40rpx;
      width: 40rpx;
    }
    .r input{
      padding-bottom: 4rpx;
      width: 80rpx;
      height: 40rpx;
    }
  }


  .confirm_order{
    background: #fff;
    box-sizing: border-box;
    align-items: center;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 30rpx;
    display: flex;
    z-index: 1;
    .cf_money{
      color: #fc9c3c;
    }
    .cf_confirm{
      width: 240rpx;
      height: 80rpx;
      border-radius: 10rpx;
      line-height: 80rpx;
      background: #5CC5A6;
      color: #fff;
      font-weight: bold;
    }
  }
</style>
